<template>
    <el-row>
      <el-col :span="11">
        <el-card class="box-card">
          <div class="demo-image">
              <div v-for="fit in fits" :key="fit" class="block">
                <!-- <span class="demonstration">{{ fit }}</span> -->
                <el-image
                   style="width: 480px; height: 575px;margin-left:140px;" 
                  :src="url"
                  :fit="fit"
                />
              </div>
            </div>
        </el-card>
      </el-col>
      <el-col :span="13">
        <el-row>
          <el-col :span="12">
           <el-button type="primary" style="margin-left:20px;" @click="getPrevTimeData">前一时间</el-button>
           <el-button type="primary" style="margin-left:20px;" @click="getCurrentData">当前时间</el-button>
           <el-button type="primary" style="margin-left:20px;" @click="getNextTimeData">后一时间</el-button>
          </el-col>
          <el-col>

          </el-col>
        </el-row>
        <el-card class="box-card">

           <el-table :data="tableData" stripe style="width: 100%" height="546">
                <el-table-column prop="evaluation" label="评估项" width="180" />
                <el-table-column prop="evaluateVal" label="评估值" width="180" />
                <el-table-column prop="timeStage" label="时间段" />
           </el-table>
        </el-card>
      </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref,watch } from "vue";
import type { ImageProps } from 'element-plus'
import axios from "axios";
import {BASE_URL} from '@/utils/common.js'
   
  const fits = [
  'fill'
 
] as ImageProps['fit'][] 

  const url = ref(BASE_URL+'/getEnergyImg');

  const tableData = ref([
    {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  ])

onMounted(
  async ()=>{
    getPrevTimeData()
  }
)

const getPrevTimeData = async ()=>{
   let url = BASE_URL+'/getOptimizeOnes?timeStage=前一时间'
   const response = await axios.get(url);
   tableData.value = response.data
}

const getCurrentData = async ()=>{
  let url = BASE_URL+'/getOptimizeOnes?timeStage=当前时间'
   const response = await axios.get(url);
   tableData.value = response.data
}

const getNextTimeData = async ()=>{
   let url = BASE_URL+'/getOptimizeOnes?timeStage=后一时间'
   const response = await axios.get(url);
   tableData.value = response.data
}
 

</script>

<style scoped lang="scss"></style>